<template>
  <!-- 表格顶部的操作栏 -->
  <div style="margin-bottom: var(--card-space);" v-if="$slots.toolbar">
    <slot name="toolbar"></slot>
  </div>
  <!-- 判断父组件那边有没有传东西过来 传东西的插槽就有效 就渲染 没传东西  就不渲染-->
  <!-- v-if写判断 条件插槽  给插槽命名，给命名的插槽穿数据 -->
  <el-table :data="data" stripe style="width: 100%;margin-top: 16px;font-size: 13px; font-weight: default;"
    :header-cell-style="{ backgroundColor: 'rgba(242, 242, 242, 0.498039215686275)', color: '#000', fontWeight: 'default' }"
    row-key="_id">
    <el-table-column v-for="item in columns" :key="item.prop" :label="item.label" :prop="item.prop"
      :width="item.width ?? 'auto'">
      <template #default="scope" v-if="$slots[item.prop]">
        <slot :name="item.prop" :row="scope.row"></slot>
      </template>
    </el-table-column>
  </el-table>

  <div v-if="pageData" class="flex-end" style="margin-top: 20px;">
    <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
      :page-sizes="[5, 15, 20, 30, 50]" background layout="total, sizes, prev, pager, next, jumper" :total="total" />
  </div>
</template>

<script setup>
const pageData = defineModel('pageData')
// 通过解构设置默认值
const { data = [], columns = [], total } = defineProps(['data', 'columns', 'total'])
</script>

<style scoped></style>